<template>
  <div style="padding: 20px">
    <Alert message="幻灯片示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">幻灯片</div>
    <div class="demoTittle2 marginBtm18">使用swiper的缩略图</div>
    <div style="width: 50%; display: flex; flex-direction: column">
      <swiper
        spaceBetween="10"
        :thumbs="{ swiper: thumbsSwiper }"
        :modules="modules"
        class="mySwiper2"
        navigation
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }"
        @swiper="setThumbsSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide><img src="../../assets/images/banner1.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner2.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner3.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner4.png" alt="" /></swiper-slide>
      </swiper>
      <swiper
        @swiper="setThumbsSwiper"
        :spaceBetween="10"
        :slidesPerView="4"
        :freeMode="true"
        :watchSlidesProgress="true"
        :modules="modules"
        class="mySwiper"
      >
        <swiper-slide><img src="../../assets/images/banner1.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner2.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner3.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner4.png" alt="" /></swiper-slide>
      </swiper>
    </div>
    <div class="demoTittle">图片预览</div>
    <div class="demoTittle2 marginBtm18">使用a-image组件并设置width，height和src的值</div>
    <a-image :width="480" :height="240" :src="banner5" />
    <div class="demoTittle">走马灯</div>
    <div class="demoTittle2 marginBtm18">使用swiper组件，设置属性autoplay，loop</div>
    <div style="width: 30%">
      <swiper
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }"
        :modules="[Navigation, Pagination, Scrollbar, A11y, Autoplay]"
        :autoplay="true"
        :loop="true"
        :navigation="{
          //下一张
          nextEl: '.btn-right',
          //上一张
          prevEl: '.btn-left',
        }"
      >
        <swiper-slide><img src="../../assets/images/banner1.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner2.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner3.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/images/banner4.png" alt="" /></swiper-slide>

        <div class="btn-left" @click="">111111111111111111111</div>
        <div class="btn-right">2122222222222222222222</div>
      </swiper>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { Alert } from 'ant-design-vue';
  import 'swiper/less';
  import 'swiper/less/free-mode';
  import 'swiper/less/navigation';
  import 'swiper/less/thumbs';
  import 'swiper/less/autoplay';
  import 'swiper/less/pagination'; // 轮播图底面的小圆点
  import {
    FreeMode,
    Navigation,
    Pagination,
    Thumbs,
    Autoplay,
    Scrollbar,
    A11y,
  } from 'swiper/modules';
  const modules = [Thumbs, FreeMode, Navigation, Pagination];
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import banner5 from '@/assets/images/banner5.png';

  const thumbsSwiper = ref(null);
  const setThumbsSwiper = (swiper) => {
    thumbsSwiper.value = swiper;
  };

  // const onSwiper = (swiper) => {
  //   console.log(swiper);
  // };
  const onSlideChange = () => {
    console.log('slide change');
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }
  .marginBtm18 {
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }

  .swiper-button-next {
    /*先将原始箭头的颜色设置为透明的  然后设置一个背景图片  达到修改按钮样式的目的*/
    right: 1.5%;
    left: auto;
    color: rgba(0, 0, 0, 0) !important;
    background: url('../../assets/images/start/left.png') center center no-repeat;
    background-size: 100% 100%;
  }

  .swiper-button-prev {
    left: 1.5%;
    right: auto;
    color: rgba(0, 0, 0, 0) !important;
    background: url('../../assets/images/start/right.png') center center no-repeat;
    background-size: 100% 100%;
  }

  /* swiper样式 */
  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-slide {
    background-size: cover;
    background-position: center;
  }

  .mySwiper2 {
    position: relative;
    float: left;
    height: 714px;
    width: 714px;
  }

  .mySwiper {
    position: relative;
    // margin-top: 5%;
    float: left;
    // margin-left: 3%;
    width: 50%;
    height: 80%;
    box-sizing: border-box;
    padding: 10px 0;
  }

  .swiper-cover {
    position: absolute;
    width: 100%;
    height: 30%;
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0%;
    right: 0%;
    z-index: 100;
  }

  .swipercover-top {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    height: 30%;
    color: white;
    border-bottom: 2px solid dodgerblue;
  }

  .swipercover-top-text {
    width: 15%;
    height: 100%;
    border-bottom: 2px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swipercover-bottom {
    margin-left: 10%;
    width: 100%;
    height: 70%;
  }

  .mySwiper .swiper-slide {
    width: 100%;
    height: 33%;
    opacity: 0.4;
    border-radius: 4%;
  }

  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
